<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客详情</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css">
  <link rel="stylesheet" href="../static/css/animate.css">
  <link rel="stylesheet" href="../static/lib/prism/prism.css">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
  <link rel="stylesheet" href="../static/css/me.css">
  <link rel="stylesheet" href="../static/css/jquery.emoji.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ></nav>

  <link rel="stylesheet" href="../static/css/alert_window.css" th:href="@{/css/alert_window.css}"/>
  <!--中间内容-->
  <!--自定义弹窗-->
  <div class="widget widget1" id="window1" hidden="hidden">
    <div class="body">
      <div class="msg" style="color: red;font-size: 20px">提示</div>
      <div style="height:20px"> </div>
      <div class="msg"><b>评论信息不能为空!请确认后填写!</b></div>
      <div class="btns">
        <a href="javascript:void(0);" class="btn-confirm" id="btn_ok1">确 定</a>
      </div>
    </div>
  </div>

<input type="hidden" id="blogTitle" th:value="${blog.title}">
<input type="hidden" id="firstPicture" th:value="${blog.firstPicture}">
<input type="hidden" id="blogId" th:value="${blog.id}">
<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
  <div class="ui container">
    <div class="ui top attached segment">
      <div class="ui horizontal link list">
        <div class="item">
          <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
          <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">YtSakura</a></div>
        </div>
        <div class="item">
          <i class="calendar icon"></i>
          <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-6-01</span>
          <span th:text="${#dates.format(blog.updateTime,'HH:mm:ss')}">16:00:00</span>
        </div>
        <div class="item">
          <i class="eye icon"></i><span th:text="${blog.views}">2342</span>
        </div>
      </div>
    </div>
    <div class="ui attached segment">
      <!--图片区域-->
      <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" alt="" class="ui fluid rounded image">
    </div>
    <div class="ui  attached padded segment">
      <!--内容-->
      <div class="ui right aligned basic segment">
        <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
      </div>

      <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2>
      <br>

      <!--中间主要内容部分-->
      <div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" th:utext="${blog.content}">

        <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

          <pre><code class="language-css">p { color: red }</code></pre>

          <pre><code class="language-css">p { color: red }</code></pre>

          <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
          <h4>现状和如何去做：</h4>

          <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
            Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

          <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
          <table class="ui table" summary="Typo.css 的测试平台列表">
            <thead>
            <tr>
              <th>OS/浏览器</th>
              <th>Firefox</th>
              <th>Chrome</th>
              <th>Safari</th>
              <th>Opera</th>
              <th>IE9</th>
              <th>IE8</th>
              <th>IE7</th>
              <th>IE6</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>OS X</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win 7</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win XP</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
            </tr>
            <tr>
              <td>Ubuntu</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            </tbody>
          </table>

          <h4>中文排版的重点和难点</h4>

          <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
            HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
          <ol>
            <li>语义：语义对应的用法和样式是否与中文排版一致</li>
            <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
          </ol>
          <p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
          <blockquote>
            <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
          </blockquote>

          <p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 <i class="serif">Typo.css</i>
            的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i> 开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <a
                    href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr title="Sofish Lin, author of Typo.css"
                                                                                        role="author">我</abbr>发<a
                    href="mailto:sofish@icloud.com">邮件</a>。</p>

          <h3 id="section3">三、附录</h3>

          <h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
          <table class="ui table" summary="Typo.css 排版偏重点">
            <thead>
            <tr>
              <th>类型</th>
              <th>语义</th>
              <th>标签</th>
              <th>注意点</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th rowspan="15">基础标签</th>
              <td>标题</td>
              <td><code>h1</code> ～ <code>h6</code></td>
              <td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
            </tr>
            <tr>
              <td>上、下标</td>
              <td><code>sup</code>/<code>sub</code></td>
              <td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
            </tr>
            <tr>
              <td>引用</td>
              <td><code>blockquote</code></td>
              <td>显示/嵌套样式</td>
            </tr>
            <tr>
              <td>缩写</td>
              <td><code>abbr</code></td>
              <td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
            </tr>
            <tr>
              <td>分割线</td>
              <td><code>hr</code></td>
              <td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
            </tr>
            <tr>
              <td>列表</td>
              <td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
              <td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
            </tr>
            <tr>
              <td>定义列表</td>
              <td><code>dl</code></td>
              <td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
            </tr>
            <tr>
              <td>选项</td>
              <td><code>input[type=radio[, checkbox]]</code></td>
              <td>与其他 <code>form</code> 元素排版时是否居中</td>
            </tr>
            <tr>
              <td>斜体</td>
              <td><code>i</code></td>
              <td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
            </tr>
            <tr>
              <td>强调</td>
              <td><code>em</code></td>
              <td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
            </tr>
            <tr>
              <td>加强</td>
              <td><code>strong/b</code></td>
              <td>显示为粗体</td>
            </tr>
            <tr>
              <td>标记</td>
              <td><code>mark</code></td>
              <td>类似荧光笔</td>
            </tr>
            <tr>
              <td>印刷</td>
              <td><code>small</code></td>
              <td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
            </tr>
            <tr>
              <td>表格</td>
              <td><code>table</code></td>
              <td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
            </tr>
            <tr>
              <td>代码</td>
              <td><code>pre</code>/<code>code</code></td>
              <td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
            </tr>
            <tr>
              <th rowspan="5">特殊符号</th>
              <td>着重号</td>
              <td><em class="typo-em">在文字下加点</em></td>
              <td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
            </tr>
            <tr>
              <td>专名号</td>
              <td><u>林建锋</u></td>
              <td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
            </tr>
            <tr>
              <td>破折号</td>
              <td>——</td>
              <td>保持一划，而非两划</td>
            </tr>
            <tr>
              <td>人民币</td>
              <td>&yen;</td>
              <td>使用两平等线的符号，或者 HTML 实体符号 <code>&amp;yen;</code></td>
            </tr>
            <tr>
              <td>删除符</td>
              <td>
                <del>已删除（deleted）</del>
              </td>
              <td>一致化各浏览器显示，中英混排正确</td>
            </tr>
            <tr>
              <th rowspan="3">加强类</th>
              <td>专名号</td>
              <td><code>.typo-u</code></td>
              <td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
            </tr>
            <tr>
              <td>着重符</td>
              <td><code>.typo-em</code></td>
              <td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
            </tr>
            <tr>
              <td>清除浮动</td>
              <td><code>.clearfix</code></td>
              <td>与一般 CSS Reset 保持一对致 API</td>
            </tr>
            <tr>
              <th rowspan="5">注意点</th>
              <td colspan="3">（1）中英文混排行高/行距</td>
            </tr>
            <tr>
              <td colspan="3">（2）上下标在 IE 中显示效果</td>
            </tr>
            <tr>
              <td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
            </tr>
            <tr>
              <td colspan="3">（4）input 多余空间问题</td>
            </tr>
            <tr>
              <td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
            </tr>
            </tbody>
          </table>

          <h5 id="appendix2">2、开源许可</h5>

        </div>

        <!--标签-->
        <div class="m-padded-lr-responsive">
          <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
        </div>

      <!--赞赏-->
      <div th:if="${blog.appreciation}">
        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange basic circular button">赞赏</button>
        </div>
        <div class="ui payQR flowing popup transition hidden">
          <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit !important;">
              <div class="image">
                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>支付宝</div>
              </div>
              <div class="image">
                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>微信</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="ui attached positive message" th:if="${blog.shareStatement}">
        <!--博客信息-->
        <div class="ui middle aligned grid">
          <div class="eleven wide column">
            <ui class="list">
              <li>作者：<span th:text="${blog.user.nickname}"></span><a href="#" th:href="@{/about}" target="_blank" >（联系作者）</a></li>
              <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-02 09:08</span></li>
              <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
            </ui>
          </div>
          <div class="five wide column">
            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 110px">
          </div>
        </div>
      </div>
      <div  class="ui bottom attached segment" th:if="${blog.commentable}">
        <!--留言区域列表-->
        <div id="comment-container"  class="ui teal segment">
          <div th:fragment="commentList">
            <div class="ui threaded comments" style="max-width: 100%;">
              <h3 class="ui dividing header">评论</h3>
              <div class="comment" th:each="comment : ${comments}">
                <a class="avatar">
                  <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">
                </a>
                <div class="content">
                  <a class="author" >
                    <span th:text="${comment.nickname}">Matt</span>
                    <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}==2">博主</div>
                    <span class="ui mini basic visitComment left pointing label m-padded-mini" th:if="${comment.adminComment}==1">访客</span>
                    <span class="ui mini basic touristComment left pointing label m-padded-mini" th:if="${comment.adminComment}==0">游客</span>
                  </a>
                  <div class="metadata">
                    <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                  </div>
                  <div id="commentText" class="text" th:utext="${comment.content}">
                    How artistic!
                  </div>
                  <div class="actions">
                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                  </div>
                </div>
                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                  <div class="comment" th:each="reply : ${comment.replyComments}">
                    <a class="avatar">
                      <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">
                    </a>
                    <div class="content">
                      <a class="author" >
                        <span th:text="${reply.nickname}">小红</span>
                        <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}==2">博主</div>
                        <span class="ui mini basic visitComment left pointing label m-padded-mini" th:if="${reply.adminComment}==1">访客</span>
                        <span class="ui mini basic touristComment left pointing label m-padded-mini" th:if="${reply.adminComment}==0">游客</span>
                        &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
                      </a>
                      <div class="metadata">
                        <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                      </div>
                      <div id="replyCommentText" class="text" th:utext="${reply.content}">
                        How artistic!
                      </div>
                      <div class="actions">
                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="comment-form" class="ui form">
          <input type="hidden" name="blog.id" th:value="${blog.id}">
          <input type="hidden" name="parentComment.id" value="-1">
          <div id="commentEditor" class="fields" contenteditable="true" data-placeholder="请输入评论信息..."></div>

          <div class="fields">
            <!--表情按钮-->
            <div class="field  m-margin-bottom-small m-mobile-wide" data-tooltip="表情未加载完全或点击无响应可刷新页面重试">
              <button id="emojiBtn" type="button" class="ui yellow button m-mobile-wide"><i class="large smile outline icon"></i>表情</button>
            </div>

            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname} : null">
              </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="mail icon"></i>
                <input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email} : null">
              </div>
            </div>
            <div class="field  m-margin-bottom-small m-mobile-wide">
              <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
  <div class="ui vertical icon buttons ">
    <button type="button" class="ui toc teal button" >目录</button>
    <a href="#comment-container" class="ui teal button" >留言</a>
    <button type="button" class="ui share teal button" >分享</button>
    <button class="ui wechat icon button"><i class="weixin icon"></i></button>
    <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
  </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
  <ol class="js-toc">

  </ol>
</div>

<!--点击分享弹出框-->
<div class="ui share-container flowing popup transition hidden" style="width: 240px!important;">
  <div class="ui bottom attached segment">
    <button title="点击分享微博" onclick="sinaWeiBo()" class="ui weibo circular icon button" ><i class="red weibo icon"></i></button>
    <button title="点击分享微信" onclick="shareWeiXin()" class="ui wechat circular icon button" ><i class="green weixin icon"></i></button>
    <button title="点击分享QQ好友" onclick="shareQQ()" class="ui qq circular icon button"><i class="blue qq icon"></i></button>

    <button title="点击分享QQ空间" onclick="shareQQZone()" class="ui qqZone circular icon button"><i class="yellow share icon"></i></button>
  </div>
</div>

  <!--二维码弹框-->
  <div id="qrcode" class="ui wechat-qr flowing popup transition hidden "style="width: 130px !important;">
    <p style="color: red;font-size: small;text-align:center" class="h6 small">手机扫码阅读本文</p>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>

  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
  <!--/*/</th:block>/*/-->

  <script>
    $('.ui.dropdown').dropdown({
      on: 'hover'
    });
  </script>
  <script src="/js/jquery.emoji.js"></script>
  <script src="/js/emoji.list.js"></script>
  <script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>
  <!--适配移动端和电脑端-->
  <script type="text/javascript">
    var browser = {
      versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {     //移动终端浏览器版本信息
          trident: u.indexOf('Trident') > -1, //IE内核
          presto: u.indexOf('Presto') > -1, //opera内核
          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
          iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, //是否iPad
          webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
        };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if(!browser.versions.mobile){ //非移动端，动态加载js和div
      WIDGET = {FID: 'EtgqPWMbdv'}
      var script4 = document.createElement('script');
      script4.type = 'text/javascript';
      script4.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111';

    var script2 = document.createElement('script');
    script2.type = 'text/javascript';
    script2.src = '\\js\\click_show_text.js';

    var script3 = document.createElement('script');
    script3.type = 'text/javascript';
    script3.color = '220,220,220';
    script3.opacity = '0.7';
    script3.zIndex = '-2';
    script3.count = '200';
    script3.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';


    $('body').append(script4);
    $('body').append(script2);
    $('body').append(script3);
  }
</script>

<script th:inline="javascript">
  /*加载emoji表情*/
  onload = function () {
    $("#commentEditor").emoji({
      button: "#emojiBtn",  //评论表情
      showTab: false,
      animation: 'slide',
      basePath: '/images/emoji',
      icons: emojiLists
    });

    $("#commentText").emojiParse({
      basePath: '/images/emoji',
      icons: emojiLists
    });

    localStorage.setItem("blogFirstPicture", document.getElementById("firstPicture").value);
    localStorage.setItem("blogTitle", document.getElementById("blogTitle").value);
    localStorage.setItem("blogId", document.getElementById("blogId").value);
  };

  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });

  $('#payButton').popup({
    popup : $('.payQR.popup'),
    on : 'click',
    position: 'bottom center'
  });

  tocbot.init({
    // Where to render the table of contents.
    tocSelector: '.js-toc',
    // Where to grab the headings to build the table of contents.
    contentSelector: '.js-toc-content',
    // Which headings to grab inside of the contentSelector element.
    headingSelector: 'h1, h2, h3',
  });
  /*目录*/
  $('.toc.button').popup({
    popup : $('.toc-container.popup'),
    on : 'click',
    position: 'left center'
  });

  /*分享*/
  $('.share.button').popup({
    popup : $('.share-container.popup'),
    on : 'click',
    position: 'left center'
  });

  $('.wechat').popup({
    popup : $('.wechat-qr'),
    position: 'left center'
  });

  var serurl = "http://101.37.175.181:8848/";
  var url = /*[[@{blog/{id}(id=${blog.id})}]]*/"";
  var qrcode = new QRCode("qrcode", {
    text: serurl+url,//二维码链接
    width: 110,
    height: 110,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  });

  $('#toTop-button').click(function () {
    $(window).scrollTo(0,500);
  });


  var waypoint = new Waypoint({
    element: document.getElementById('waypoint'),
    handler: function(direction) {
      if (direction == 'down') {
        $('#toolbar').show(100);
      } else {
        $('#toolbar').hide(500);
      }
      console.log('Scrolled to waypoint!  ' + direction);
    }
  })


    //评论表单验证
    $('.ui.form').form({
      fields: {
        content: {
          identifier: 'nickname',
          rules: [{
            type: 'empty',
            prompt: '请输入你的大名'
          }]
        },
        type: {
          identifier: 'email',
          rules: [{
            type: 'email',
            prompt: '请填写正确的邮箱地址'
          }]
        }
      }
    });

  $(function ( ) {
    $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/1");
  });

  $('#commentpost-btn').click(function () {
    var boo = $('.ui.form').form('validate form');
    var text = document.getElementById("commentEditor").innerHTML;
    if (boo && text!="") {
      console.log('校验成功');
      postData();
    } else if(text == ""){
      console.log('留言数据校验不通过');
      $('#window1').removeAttr('hidden');
      return;
    }
  });

  function postData() {
    $("#comment-container").load(/*[[@{/comments}]]*/"", {
      "parentComment.id": $("[name='parentComment.id']").val(),
      "blog.id": $("[name='blog.id']").val(),
      "nickname": $("[name='nickname']").val(),
      "email": $("[name='email']").val(),
      //"content": $("[name='content']").val()
      "content" : document.getElementById("commentEditor").innerHTML
    },function () {
      // $(window).scrollTo($('#comment-container'),500);
      clearContent();
    });
  }

  function clearContent() {
    $("[name='parentComment.id']").val(-1);
    document.getElementById("commentEditor").innerText='';
    $("[name='content']").attr("data-placeholder", "请输入评论信息...");
  }


  function reply(obj) {
    var commentId = $(obj).data('commentid');
    var commentNickname = $(obj).data('commentnickname');
    $("[name='content']").attr("placeholder", "@"+commentNickname);
    $("[name='parentComment.id']").val(commentId);
    $(window).scrollTo($('#comment-form'),500);
  }

  $(function(){
    //确认
    $('#btn_ok1').click(function(){
      $('#window1').attr('hidden','hidden');
    });
  });

  /*QQ分享*/
  function shareQQ() {
    var param = {
      url: 'http://101.37.175.181:8848/blog/'+localStorage.getItem("blogId"),
      desc: '博客很好很详细，值得一看!',
      title : localStorage.getItem("blogTitle")+"  from GameFunBlog",
      summary : '我分享了一篇博客，快来看吧！',
      pics : localStorage.getItem("blogFirstPicture"),
      sharesource:'qq',
      site: 'GameFunBlog'
    };
    var s = [];
    for (var i in param) {
      s.push(i + '=' + encodeURIComponent(param[i] || ''));
    }
    var targetUrl = "https://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&') ;
    //var targetUrl = "http://connect.qq.com/widget/shareqq/index.html?" + s.join('&') ;
    //window.location.href=targetUrl;
    window.open(targetUrl, 'qq', 'height=450, width=600');
  }
  /*分享QQ空间*/
  function shareQQZone() {
    var param = {
      url: 'http://101.37.175.181:8848/blog/'+localStorage.getItem("blogId"),
      sharesource: 'qzone',
      title : localStorage.getItem("blogTitle"),
      summary : '我分享了一篇博客，快来看吧！',
      pics : localStorage.getItem("blogFirstPicture"),
    };
    var s = [];
    for (var i in param) {
      s.push(i + '=' + encodeURIComponent(param[i] || ''));
    }
    var targetUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" + s.join('&') ;
    //window.location.href=targetUrl;
    window.open(targetUrl, 'qqZone', 'height=800, width=800');
  }

  /**
   * 微信分享
   * @return {[type]} [description]
   */
  function shareWeiXin() {
    var url = window.location.href,
            encodePath = encodeURIComponent(url),
            targetUrl = 'http://qr.liantu.com/api.php?text=' + encodePath;
    window.open(targetUrl, 'weixin', 'height=400, width=400');
  }

  /**
   * 分享新浪微博
   * @param  {[type]} title [分享标题]
   * @param  {[type]} url   [分享url链接，默认当前页面]
   * @param  {[type]} pic   [分享图片]
   * @return {[type]}       [description]
   */
  function sinaWeiBo() {
    var param = {
      url: window.location.href,
      type: '3',
      count: '', /** 是否显示分享数，1显示(可选)*/
      appkey: '', /** 您申请的应用appkey,显示分享来源(可选)*/
      title: localStorage.getItem("blogTitle"), /** 分享的文字内容(可选，默认为所在页面的title)*/
      pic: localStorage.getItem("blogFirstPicture"), /**分享图片的路径(可选)*/
      ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
      rnd: new Date().valueOf()
    }
    var temp = [];
    for( var p in param ) {
      temp.push(p + '=' +encodeURIComponent( param[p ] || '' ) )
    }
    var targetUrl = 'http://service.weibo.com/share/share.php?' + temp.join('&');
    //window.open(targetUrl, 'sinaweibo', 'height=430, width=400');
    window.location.href=targetUrl;
  }
</script>
</body>
</html>